<template>
  <div class="panel-account">
    <el-form :rules="rules" :model="account" ref="elFormRef" label-width="60px">
      <el-form-item label="账号" size="small" prop="name">
        <el-input v-model="account.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" size="small" prop="password">
        <el-input v-model="account.password" show-password></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { useStore } from 'vuex';

import { ElForm } from 'element-plus';
import { rules } from '../config/account-config';
import localCache from '@/utils/cache';

export default defineComponent({
  setup() {
    const elFormRef = ref<InstanceType<typeof ElForm>>();
    const store = useStore();

    const account = reactive({
      name: localCache.getCache('name') ?? '',
      password: localCache.getCache('password') ?? ''
    });

    const accountLoginAction = (isKeepPassword: boolean) => {
      elFormRef.value?.validate((valid) => {
        // 验证账号密码
        if (valid) {
          // 1.判断是否需要记住密码
          if (isKeepPassword) {
            localCache.setCache('name', account.name);
            localCache.setCache('password', account.password);
          }

          // 2.发送登录请求 -> Login action
          store.dispatch('loginModule/accountLoginAction', { ...account });
        }
      });
    };

    return {
      account,
      rules,
      accountLoginAction,
      elFormRef
    };
  }
});
</script>

<style scoped lang="less">
/* 对input传入rules的方式
1.写好规则{name:[], password:[]}
2.Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需校验的字段名即可。
3.最后form表单不知道你最新的值,我们需要将account的值绑定给form表单
 */

/* account登入的逻辑: 点击登入之后,这个组件接收到点击事件开始验证account
1.使用ref绑定el-form, 拿到组件elFormRef
2.elFormRef.value有一个函数.validate 可以验证表单输入的账号密码是否正确, 传入一个回调函数.
3.检查是否勾选 记住密码. 从loginPanel将isKeepPsw的状态传过来, 使用localStorage将账号密码报错,动态获取localStorage里面的aNumber与paw, 有值直接绑定在input输入框里面.
 */
</style>
